<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>用户信息</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="24">
				<!--<el-button type="primary" @click="openAccountInfo(null)">添 加</el-button>-->
				<el-table :data="accountInfos" border highlight-current-row style="width: 100%">
					<!-- -->
					<el-table-column prop="accountUser" label="登录名"></el-table-column>
					<el-table-column prop="accountNick" label="昵称"></el-table-column>
					<el-table-column prop="accountMobile" label="手机号"></el-table-column>
					<el-table-column prop="accountLogo" label="头像">
						<template slot-scope="scope">
							<img v-if="scope.row.accountLogo" :src=" scope.row.accountLogo" class="avatar-sm">
						</template>
					</el-table-column>
					<el-table-column prop="accountRole" label="角色">
						<template slot-scope="scope">
							{{scope.row.accountRole === 1?'专家':'用户'}}
						</template>
					</el-table-column>
					<el-table-column prop="accountStatus" label="状态">
						<template slot-scope="scope">
							{{scope.row.accountStatus === 0?'未激活':scope.row.accountStatus === 1?'有效':'不可登录'}}
						</template>
					</el-table-column>
					<el-table-column prop="accountTime" label="创建时间"></el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
							<el-button @click="updateAccountRole(scope.row)" 
							v-if="scope.row.accountRole === 0"
							type="text" size="small">设置专家</el-button>
							<el-button @click="openAccountInfo(scope.row)" type="text" size="small">修 改</el-button>
							<el-popconfirm title="是否删除？" @confirm="delAccountInfo(scope.row.accountId)">
								<el-button slot="reference" type="text" size="small">删 除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog :title="accountInfoForm.ttitle" :visible.sync="accountInfoForm.visible" width="30%">
			<el-form :model="accountInfoForm" :rules="accountInfoRules" ref="accountInfoForm" label-width="100px">
				<!-- -->
				<el-form-item label="登录名" prop="accountUser">
					<el-input v-model="accountInfoForm.accountUser"></el-input>
				</el-form-item>
				<el-form-item label="登陆密码" prop="accountPassword">
					<el-input v-model="accountInfoForm.accountPassword"></el-input>
				</el-form-item>
				<el-form-item label="昵称" prop="accountNick">
					<el-input v-model="accountInfoForm.accountNick"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="accountMobile">
					<el-input v-model="accountInfoForm.accountMobile"></el-input>
				</el-form-item>
				<!--<el-form-item label="头像" prop="accountLogo">
					<el-input v-model="accountInfoForm.accountLogo"></el-input>
				</el-form-item>-->
				<el-form-item label="角色" prop="accountRole">
					<el-select v-model="accountInfoForm.accountRole" placeholder="请选择">
				    <el-option
				      v-for="item in [{value:'0',label:'用户'}, {value:'1',label:'专家'}]"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="状态" prop="accountStatus">
					<el-select v-model="accountInfoForm.accountStatus" placeholder="请选择">
				    <el-option
				      v-for="item in [{value:'0',label:'未激活'}, {value:'1',label:'有效'}, {value:'2',label:'不可登录'}]"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeAccountInfo">取 消</el-button>
				<el-button type="primary" @click="saveAccountInfo">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		accountInfos: [],
		selectAccountInfo: null,
		accountInfoForm: {
			visible: false,
			ttitle: '新增/修改',
			accountId : '',
			accountUser : '',
			accountPassword : '',
			accountNick : '',
			accountMobile : '',
			accountLogo : '',
			accountRole : '',
			accountStatus : '',
		},
		accountInfoQuery: {
			page: '',
			size: '',
		},
		accountInfoRules: {
			accountUser: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			accountPassword: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			accountNick: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			accountMobile: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			accountLogo: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			accountRole: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			accountStatus: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
		},
	}
	let vueMethods = {
		getAccountInfos() {
			let that = this
			postRequst('/admin/getAccounts', that.accountInfoQuery, true).then(function (resp) {
				that.accountInfos = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					that.selectAccountInfo = resp.rows[0]
				}
			})
		},
		openAccountInfo(row) {
			let that = this
			if (row) {
				that.accountInfoForm.ttitle = '修改'
				that.accountInfoForm.accountId = row.accountId
				that.accountInfoForm.accountUser = row.accountUser
				that.accountInfoForm.accountPassword = row.accountPassword
				that.accountInfoForm.accountNick = row.accountNick
				that.accountInfoForm.accountMobile = row.accountMobile
				that.accountInfoForm.accountLogo = row.accountLogo
				that.accountInfoForm.accountRole = row.accountRole + ''
				that.accountInfoForm.accountStatus = row.accountStatus + ''
			} else {
				that.accountInfoForm.ttitle = '新增'
				that.accountInfoForm.accountId = ''
				that.accountInfoForm.accountUser = ''
				that.accountInfoForm.accountPassword = ''
				that.accountInfoForm.accountNick = ''
				that.accountInfoForm.accountMobile = ''
				that.accountInfoForm.accountLogo = ''
				that.accountInfoForm.accountRole = ''
				that.accountInfoForm.accountStatus = ''
			}
			that.accountInfoForm.visible = true
		},
		closeAccountInfo() {
			this.$refs["accountInfoForm"].resetFields();
			this.accountInfoForm.visible = false
		},
		saveAccountInfo() {
			let that = this
			this.$refs["accountInfoForm"].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveAccountInfo', that.accountInfoForm).then(function (resp) {
						if (resp.status == 0) {
							that.getAccountInfos()
							that.accountInfoForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delAccountInfo(accountId) {
			let that = this
			postRequst('/admin/delAccountInfo', {accountId: accountId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getAccountInfos()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		updateAccountRole(account){
			let that = this
			this.$confirm('是否将该用户设置为专家?', '提示', {
	          confirmButtonText: '确定设置',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	          postRequst('/admin/updateAccountRole', {accountId: account.accountId}, true).then(function (resp) {
					if (resp.status == 0) {
						that.getAccountInfos()
						that.$message({message: resp.msg, type: "success"});
					} else {
						that.$message({message: resp.msg, type: "error"});
					}
				})
	        }).catch(() => {});
		}
	}
	function vueCreated() {
		let that = this
		that.getAccountInfos()
	}
</script>

</html>